<script setup>
import { ref, defineProps, defineExpose } from 'vue'
import { Plus, Check, Close } from '@element-plus/icons-vue'
import { uploadService } from '@/api/upload.js'
import { userAddService, userModifyService } from '@/api/user.js'
const formmodel = ref({})
const formmodel1 = {
  avatar: '',
  username: '',
  name: '',
  sex: 1,
  status: 0
}
const emit = defineEmits(['update:modelValue', 'getUserList'])
const drawer = defineProps({
  modelValue: {
    type: Boolean
  }
})
defineExpose({
  formmodel,
  formmodel1
})
//添加用户
const addUser = async () => {
  if (!formmodel.value.id) {
    //添加用户信息
    await userAddService(formmodel.value)
    ElMessage.success('添加成功')
  } else {
    //修改用户信息
    console.log(formmodel.value)
    await userModifyService(formmodel.value)
    ElMessage.success('修改成功')
  }
  emit('getUserList')
  emit('update:modelValue', false)
}
//图片上传
const upload = async (file) => {
  const data = new FormData()
  data.append('file', file.raw)
  const res = await uploadService(data)
  formmodel.value.avatar = res.data.data
}
</script>
<template>
  <el-form :model="formmodel" label-width="90px">
    <el-form-item label="头像："
      ><el-upload
        class="avatar-uploader"
        :show-file-list="false"
        :auto-upload="false"
        @change="upload"
      >
        <img v-if="formmodel.avatar" :src="formmodel.avatar" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon"
          ><Plus
        /></el-icon> </el-upload
    ></el-form-item>
    <el-form-item label="用户名：">
      <el-input v-model="formmodel.username"></el-input>
    </el-form-item>
    <el-form-item label="姓名：">
      <el-input v-model="formmodel.name"></el-input>
    </el-form-item>
    <el-form-item label="性别：">
      <el-switch
        v-model="formmodel.sex"
        inactive-text="男"
        active-text="女"
        active-value="0"
        inactive-value="1"
      />
    </el-form-item>
    <el-form-item label="状态：">
      <el-switch
        v-model="formmodel.status"
        class="mt-2"
        style="margin-left: 24px"
        inline-prompt
        :active-icon="Check"
        :inactive-icon="Close"
        active-value="1"
        inactive-value="0"
      />
    </el-form-item>
    <el-form-item>
      <el-space size="70">
        <el-button type="primary" @click="addUser">添加</el-button>
        <el-button
          type="info"
          @click="emit('update:modelValue', false)"
          :value="drawer"
          >取消</el-button
        >
      </el-space>
    </el-form-item>
  </el-form>
</template>
<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
